<template>
    <div class="leftContainer">
        <div class="s1">
            <containerBox :title="'公告'">
                <div class="content">
                    <div class="top">
                        <div v-if="id==100">{{ noticeMap[noticeMap.length-1].noticeTitle }}</div>
                        <div v-else>{{ noticeMap[0].noticeTitle}}</div>
                    </div>
                    <div class="bottom">
                        <div class="title">
                            <div>设备注意事项</div>
                        </div>
                       
                        <vue-seamless-scroll
                            :data="listData"
                            :class-option="seamlessScrollOption"
                            class="scroll"
                        >
                            <div v-for="item in listData" :key="item">
                                {{item}}
                            </div>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </containerBox>
        </div>

        <div class="s2">
            <containerBox :title="'机器总数'">
                <div class="cards">
                    <!-- <div class="card" v-for="item in 5" :key="item" :class="[item <=2 ? 'light' :'dark'  ]">
                        {{ (deptSize + "").padStart(5, '0')[item-1] }}
                    </div> -->
                    <div class="card dark" v-for="item,index in deptSize" :key="index" :class="[item == '0' ? 'light' :'dark']">
                        {{ item }}
                    </div>
                </div>
            </containerBox>
        </div>

        <div class="s3">
            <containerBox :title="'当日报警数据'" :show="true">
                <div class="content">
                    <vue-seamless-scroll 
                        :data="s3Data"
                        :class-option="seamlessScrollOption2"
                        class="scroll-list"
                    >
                        <div class="item" v-for="item,index in s3Data" :key="index">
                            <div class="time">
                                {{ new Date().toLocaleString() }}
                                <div class="icon">
                                    <img src="../../../../assets/img/otto/icon_jiantou.png" />
                                </div>
                            </div>
                            <div class="info">
                                <div class="type" :class="types[index%3]">
                                    <img :src="require(`../../../../assets/img/otto/icon-${index+1}.png`)" />
                                </div>
                                <div class='desc' :class="types[index%3]"> {{ item.src_name }}, 违规数据{{ item.data_count }}条<span v-show="item.data_count">，请及时处理！</span></div>
                            </div>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </containerBox>
        </div>
    </div>
</template>

<script>
import containerBox from '../container-box/index.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
    components: {
        containerBox, vueSeamlessScroll
    },
    props: ['deptSize', 'noticeMap', 'eventMap'],
    data() {
        return {
            s1Config: {
                header: ['序号', '设备在线情况', '离线原因', '时间'],
                columnWidth: [30, 180, 160, 160],
            },
            s3Data: [
                {src_name: 'AI安全帽检测', data_count: 0,},
                {src_name: '攀爬机头', data_count: 0,},
                {src_name: '人数超限', data_count: 0},
                {src_name: '人员倒地', data_count: 0},
                {src_name: '非安全通道', data_count:0},
                {src_name: '火点检测', data_count: 0},
                {src_name: '区域入侵', data_count: 0},
            ],
            id: 0,
            src: require('../../../../assets/img/otto/icon-1.png'),
            listData: [
                "定期清理不仅能延长设备的使用寿命，更能提升其性能表现，避免可能出现的故障隐患。",
                "定期检查设备的放置情况，如有发现靠近风口的迹象，及时进行调整或者对放置设备的周边环境保持关注，避免出现可能产生气流或风动的因素。",
                "机器人铅酸电池的开关若未关闭，会导致电池过度放电，这将对电池性能和使用寿命产生严重不利影响，请您关注机器人在使用完毕后确保空开处于关闭状态。"
            ],
            types: ['error', 'warning', 'success'],
            seamlessScrollOption: {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: false, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: false, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 0, // 单步运动停止的时间(默认值1000ms)
            },
            seamlessScrollOption2: {
                step: 0.5, // 数值越大速度滚动越快 0.5
                limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: false, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: false, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 0, // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
   
    beforeMount() {
        this.id = this.$route.query.deptId || 100;
        this.initData()
    },
    mounted() {
        
    },
    methods: {
        initData() {
            this.s3Data[0].data_count = (this.eventMap.find(e=>e.src_name.includes('安全帽')) || {}).data_count || 0;
            this.s3Data[1].data_count = (this.eventMap.find(e=>e.src_name.includes('攀爬机头')) || {}).data_count || 0;
            this.s3Data[2].data_count = (this.eventMap.find(e=>e.src_name.includes('超员')) || {}).data_count || 0;
            this.s3Data[3].data_count = (this.eventMap.find(e=>e.src_name.includes('人员倒地')) || {}).data_count || 0;
            this.s3Data[4].data_count = (this.eventMap.find(e=>e.src_name.includes('非安全通道')) || {}).data_count || 0;
            this.s3Data[5].data_count = (this.eventMap.find(e=>e.src_name.includes('火点') || e.src_name.includes("吸烟")) || {}).data_count || 0;
            this.s3Data[6].data_count = (this.eventMap.find(e=>e.src_name.includes('区域入侵')) || {}).data_count || 0;
        },
    }
}
</script>

<style lang="scss" scoped>
.leftContainer {
    width: 450px;
    height: 95%;
    margin: 10px 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .s1 {
        height: 290px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        

        .content {
            width: 95%;
            height: 95%;
            display: flex;
            flex-direction: column;
            overflow: hidden;

            .top {
                padding: 10px;
                div {
                    line-height: 24px;
                }

            }

            .bottom {
                .title {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 40px;
                    font-size: 20px;
                    color: #1FC6FF;
                    background: url('../../../../assets/img/otto/gonggao-bg.png') no-repeat 0px 0px;
                    background-size: 100% 100%;
                }

                .scroll {
                    overflow: hidden;
                    div {
                        line-height: 24px;
                        text-indent: 2rem;
                    }
                }
            }
            
            
        }
    }

    .s2 {
        height: 205px;
        width: 100%;

        .cards {
            height: 60%;
            width: 90%;
            margin: 0 auto;
            display: flex;
            align-items:center;
            justify-content: space-around;
            
            .card  {
                height: 100%;
                width: 50px;
                font-size: 40px;
                font-weight: bold;
                color: white;   
                display: flex;
                align-items: center;
                justify-content: center;                

                &.light {
                    background: url('../../../../assets/img/otto/numBorderLight.png') no-repeat 0px 0px;
                    background-size: 100% 100%;
                }

                &.dark {
                    background: url('../../../../assets/img/otto/numBorderDark.png') no-repeat 0px 0px;
                    background-size: 100% 100%;
                }
            }
        }
    }

    .s3 {
        height: 408px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .content {
            width: 95%;
            height: 95%;
            display: flex;
            flex-direction: column;
            overflow: hidden;

            .scroll-list {
                overflow: hidden;

                .item {
                    width: 100%;
                    margin-top: 30px;
                    
                    .time {
                        display: flex;
                        font-size: 22px;
                        color: #1FC6FF;
                        margin: 10px 0;
                        .icon {
                            margin-left: 10px;
                            img {
                                height: 17px;
                            }
                        }
                    }

                    .info {
                        width: 100%;
                        display: flex;
                        height: 32px;
                        align-items: center;
                        font-size: 14px;

                        .type {
                            width: 36px;
                            height: 100%;
                            display: flex;
                            align-items:center;
                            justify-content: center;

                            &.error {
                                background: url("../../../../assets/img/otto/info-error-head.png") no-repeat 0px 0px;
                                background-size: 100% 100%;
                            }

                            &.warning {
                                background: url("../../../../assets/img/otto/info-warning-head.png") no-repeat 0px 0px;
                                background-size: 100% 100%;
                            }

                            &.success {
                                background: url("../../../../assets/img/otto/info-success-head.png") no-repeat 0px 0px;
                                background-size: 100% 100%;
                            }
                        }

                        .desc {
                            flex: 1;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            margin-left: 10px;
                            &.error {
                                background: url("../../../../assets/img/otto/info-error.png") no-repeat 0px 0px;
                                background-size: 100% 100%;
                            }

                            &.warning {
                                background: url("../../../../assets/img/otto/info-warning.png") no-repeat 0px 0px;
                                background-size: 100% 100%;
                            }

                            &.success {
                                background: url("../../../../assets/img/otto/info-success.png") no-repeat 0px 0px;
                                background-size: 100% 100%;
                            }
                        }
                        
                    }
                    
                }
            }
            
        }
    }

    

}
</style>

